<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Mootools UI - boxes demo</title>
    <script type="text/javascript" src="../mootools-1.2-core-nc.js"></script>
    <script type="text/javascript" src="../mui.grid.js"></script>
    <script type="text/javascript">
    
	var grid = MUI.Grid.getInstance({
	    columns: [
		{label:"name", type:"string"},
		{label:"last name"},
		{label:"date", type:"datetime"}
	    ],
	    data:[
		["Nir", "Amara", new Date(2007,9,19)],
		["John", "Duo", new Date(2007,9,15)],
		["Gever", "Foo", new Date(2007,10,19)]
	    ]
	}, ["Sortable"]);
	
	window.addEvent("domready", function(){
	    
	    grid.render().injectInside(document.body);
	    
	    /*var domGrid = MUI.Grid.getInstance($("tbl1"), ["Sortable"]);
	    domGrid.render();*/
	    $("tbl1").asGrid(["Sortable"]);
	});
    
    </script>
    <style type="text/css">
	table{
	    width:500px;
	    border-collapse:collapse;
	    margin-bottom:3em;
	}
	
	table th, table td{
	    width:100px;
	    padding:0.1em 1em;
	    border:1px solid #EFEFEF;
	}
	
	table th{
	    cursor:pointer;
	    font-weight:bold;
	    border-bottom-color:#D0D0D0;
	}
    </style>
</head>
<body>
    <table id="tbl1">
	<thead>
	    <tr>
		<th type="string">Name</th>
		<th>Job</th>
		<th type="datetime">Registration Date</th>
	    </tr>
	</thead>
	<tbody>
	    <tr>
		<td>Nir</td>
		<td>Programmer</td>
		<td>2007-9-15</td>
	    </tr>
	    <tr>
		<td>John</td>
		<td>Basketballer</td>
		<td>2007-9-16</td>
	    </tr>
	</tbody>
    </table>
</body>
</html>
